<template>
	<view>
	<view class="header">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper-container">
					<swiper-item v-for="(item,index) in images" :key="index">
			  <image :src="item"></image>
			</swiper-item>
			
		</swiper>
	</view>
	<view class="content">
	  <view class="grid-item">
	    <text class="iconfont icon-meishi"></text>
	  </view>
	  <view class="grid-item">
	    <text class="iconfont icon-zhuangxiu"></text>
	    <view>装修</view>
	  </view>
	  <view class="grid-item">
	    <text class="iconfont icon-xiyu"></text>
	    <view>洗浴</view>
	  </view>
	  <view class="grid-item">
	    <text class="iconfont icon-qiche"></text>
	    <view>汽车</view>
	  </view>
	  <view class="grid-item">
	    <text class="iconfont icon-changge"></text>
	    <view>唱歌</view>
	  </view>
	  <view class="grid-item">
	    <text class="iconfont icon-zhusu"></text>
	    <view>住宿</view>
	  </view>
	  <view class="grid-item">
	    <text class="iconfont icon-boshimao"></text>
	    <view>学习</view>
	  </view>
	  <view class="grid-item">
	    <text class="iconfont icon-shiwu-gongwenbao"></text>
	    <view>工作</view>
	  </view>
	  <view class="grid-item">
	    <text class="iconfont icon-jiehunchoubei"></text>
		 <view>结婚</view>
	  </view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images:[
					"/static/images/1.png",
					"/static/images/2.png",
					"/static/images/3.png",
					"/static/images/4.png"
				]
			};
		}
	}
</script>

<style lang="scss">
	@import "../../static/iconfont/iconfont.css";
	
		swiper {
			width: 100%;
			height: 400rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	
	.content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		gap: 1rpx;
		padding: 1rpx;
	}
	
	.grid-item {
	  background-color: #fff; 
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center; 
	  height: 100px; 
	  border: 1rpx solid rgb(219, 219, 219);
	}
	.iconfont {
	  box-sizing: border-box;
	  padding: 30rpx 24rpx;
	  display: block;
	  font-size: 72rpx;
	  width: 120rpx;
	  height: 120rpx;
	  border-radius: 50%;
	}
</style>
